<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-GB">

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<meta name="author" content="The CSS Ninja">
	<meta name="keywords" content="CSS, Tree menu, checked pseudo-class, CSS Ninja">
	<meta name="description" content="Create a pure CSS tree folder structure with collapsible folders utilising checkboxes along with the checked pseudo-class">
	<meta name="robots" content="all">
	<meta name="copyright" content="The CSS Ninja">
	
	<!--[if gte IE 9 ]><link rel="stylesheet" type="text/css" href="_styles.css" media="screen"><![endif]-->
	<!--[if !IE]>--><link rel="stylesheet" type="text/css" href="_styles.css" media="screen"><!--<![endif]-->
	
	<title>Pure CSS collapsible tree menu | The CSS Ninja</title>

</head>
<body>
	
	<ol class="tree">
		<li>
			<label for="folder1">Folder 1</label> <input type="checkbox" checked disabled id="folder1" /> 
			<ol>
				<li class="file"><a href="document.html.pdf">File 1</a></li>
				<li>
					<label for="subfolder1">Subfolder 1</label> <input type="checkbox" id="subfolder1" /> 
					<ol>
						<li class="file"><a href="">Filey 1</a></li>
						<li>
							<label for="subsubfolder1">Subfolder 1</label> <input type="checkbox" id="subsubfolder1" /> 
							<ol>
								<li class="file"><a href="">File 1</a></li>
								<li>
									<label for="subsubfolder2">Subfolder 1</label> <input type="checkbox" id="subsubfolder2" /> 
									<ol>
										<li class="file"><a href="">Subfile 1</a></li>
										<li class="file"><a href="">Subfile 2</a></li>
										<li class="file"><a href="">Subfile 3</a></li>
										<li class="file"><a href="">Subfile 4</a></li>
										<li class="file"><a href="">Subfile 5</a></li>
										<li class="file"><a href="">Subfile 6</a></li>
									</ol>
								</li>
							</ol>
						</li>
						<li class="file"><a href="">File 3</a></li>
						<li class="file"><a href="">File 4</a></li>
						<li class="file"><a href="">File 5</a></li>
						<li class="file"><a href="">File 6</a></li>
					</ol>
				</li>
			</ol>
		</li>
		<li>
			<label for="folder2">Folder 2</label> <input type="checkbox" id="folder2" /> 
			<ol>
				<li class="file"><a href="">File 1</a></li>
				<li>
					<label for="subfolder2">Subfolder 1</label> <input type="checkbox" id="subfolder2" /> 
					<ol>
						<li class="file"><a href="">Subfile 1</a></li>
						<li class="file"><a href="">Subfile 2</a></li>
						<li class="file"><a href="">Subfile 3</a></li>
						<li class="file"><a href="">Subfile 4</a></li>
						<li class="file"><a href="">Subfile 5</a></li>
						<li class="file"><a href="">Subfile 6</a></li>
					</ol>
				</li>
			</ol>
		</li>
		<li>
			<label for="folder3">Folder 3</label> <input type="checkbox" id="folder3" /> 
			<ol>
				<li class="file"><a href="">File 1</a></li>
				<li>
					<label for="subfolder3">Subfolder 1</label> <input type="checkbox" id="subfolder3" /> 
					<ol>
						<li class="file"><a href="">Subfile 1</a></li>
						<li class="file"><a href="">Subfile 2</a></li>
						<li class="file"><a href="">Subfile 3</a></li>
						<li class="file"><a href="">Subfile 4</a></li>
						<li class="file"><a href="">Subfile 5</a></li>
						<li class="file"><a href="">Subfile 6</a></li>
					</ol>
				</li>
			</ol>
		</li>
		<li>
			<label for="folder4">Folder 4</label> <input type="checkbox" id="folder4" /> 
			<ol>
				<li class="file"><a href="">File 1</a></li>
				<li>
					<label for="subfolder4">Subfolder 1</label> <input type="checkbox" id="subfolder4" /> 
					<ol>
						<li class="file"><a href="">Subfile 1</a></li>
						<li class="file"><a href="">Subfile 2</a></li>
						<li class="file"><a href="">Subfile 3</a></li>
						<li class="file"><a href="">Subfile 4</a></li>
						<li class="file"><a href="">Subfile 5</a></li>
						<li class="file"><a href="">Subfile 6</a></li>
					</ol>
				</li>
			</ol>
		</li>
		<li>
			<label for="folder5">Folder 5</label> <input type="checkbox" id="folder5" /> 
			<ol>
				<li class="file"><a href="">File 1</a></li>
				<li>
					<label for="subfolder5">Subfolder 1</label> <input type="checkbox" id="subfolder5" /> 
					<ol>
						<li class="file"><a href="">Subfile 1</a></li>
						<li class="file"><a href="">Subfile 2</a></li>
						<li class="file"><a href="">Subfile 3</a></li>
						<li class="file"><a href="">Subfile 4</a></li>
						<li class="file"><a href="">Subfile 5</a></li>
						<li class="file"><a href="">Subfile 6</a></li>
					</ol>
				</li>
			</ol>
		</li>
	</ol>
	
</body>
</html>
